<template>
  <view class="outBox">
  <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop
           object-fit="cover"></video>
    <view class="bgBox"></view>

    <u-navbar leftText="投诉" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '投诉' }}</text>
      </view>
    </u-navbar>
    <view class="content" :style="{
			marginTop:menuHeight + 'px',
				minHeight:` calc(100vh - ${menuHeight}px)`
		}">
      <view class="items">
        <view class="item" @click="handleShowDia">
          <view class="label">
            <text>类型</text>
          </view>
          <view class="value" v-if="!curType">
            <text>请选择</text>
            <u-icon name="arrow-right" size="16" color="#fff"></u-icon>
          </view>
          <view class="value Myvalue" v-else="curType">
            <text>{{ getOptions(curType).label }}</text>
            <u-icon name="arrow-right" size="16" color="#fff"></u-icon>
          </view>
        </view>
        <view class="item" @click="handleShowUser">
          <view class="label">
            <text>员工</text>
          </view>
          <view class="value" v-if="!curUser">
            <text>请选择</text>
            <u-icon name="arrow-right" size="16" color="#fff"></u-icon>
          </view>
          <view class="value Myvalue" v-else="curUser">
            <text>{{ userList.find(item => item.value == curUser).label }}</text>
            <u-icon name="arrow-right" size="16" color="#fff"></u-icon>
          </view>
        </view>
        <view class="item" style="height: 220rpx">
          <view class="label">
            <text>图片</text>
          </view>
          <view class="upload-box">
            <u-upload @afterRead="afterRead" :fileList="fileList1" @delete="deletePic" name="1" multiple
                      :previewFullImage="true"
                      :maxCount="10"></u-upload>
          </view>
        </view>
        <view class="item" style="flex-direction: column;align-items: flex-start;margin-top: 56rpx">
          <view class="label">
            <text>投诉的内容</text>
          </view>
          <view class="textArea">
            <u--textarea v-model="remark" placeholder="请输入" color="#fff"></u--textarea>
          </view>
        </view>

      </view>

      <view class="btns">
        <view class="btnOut">
          <view class="btn" @click="handleSuc2">
            确定
          </view>
        </view>
      </view>
      <diaBox ref="diaBoxRef3" mode="bottom" width="100vw">
        <template v-slot:dia-tit>
          <view class="diaTit">
            <view class="left" @click="handleCancel">
              <text>取消</text>
            </view>
            <view class="right" @click="handleCancel">
              <text>确定</text>
            </view>
          </view>
        </template>
        <template v-slot:dia-cont>
          <view class="diaBox">
            <view class="items2">
              <view class="item2" :class="item.value == curType ? 'active' : ''" @click="choiceType(item)"
                    v-for="item in options1">
                {{ item.label }}
              </view>
            </view>
          </view>
        </template>
      </diaBox>
      <diaBox ref="diaBoxRef" mode="bottom" width="100vw">
        <template v-slot:dia-tit>
          <view class="diaTit">
            <view class="left" @click="handleCancel">
              <text>取消</text>
            </view>
            <view class="right" @click="handleCancel">
              <text>确定</text>
            </view>
          </view>
        </template>
        <template v-slot:dia-cont>
          <view class="diaBox">
            <view class="items2">
              <view class="item2" :class="item.value == curType ? 'active' : ''" @click="choiceType(item)"
                    v-for="item in options">
                {{ item.label }}
              </view>
            </view>
          </view>
        </template>
      </diaBox>
      <diaBox ref="diaBoxRef2" mode="bottom" width="100vw">
        <template v-slot:dia-tit>
          <view class="diaTit">
            <view class="left" @click="handleCancel">
              <text>取消</text>
            </view>
            <view class="search">
              <u-search v-model="searchValue" :showAction="false" :animation="true"
                        @change="searchUser"></u-search>
            </view>
            <view class="right" @click="handleSuc2">
              <text>确定</text>
            </view>
          </view>
        </template>
        <template v-slot:dia-cont>
          <view class="diaBox2">
            <scroll-view class="scroll-view" :scroll-y="true" :style="{height: '60vh'}">
              <view class="items2">
                <view class="item2" :class="item.value == curUser ? 'active' : ''" @click="choiceUser(item)"
                      v-for="item in userList">
                  {{ item.label }}
                </view>
              </view>
            </scroll-view>
          </view>
        </template>
      </diaBox>

    </view>
  </view>
</template>

<script>
import {
  getWXStatusHeight,
  debounce
} from '@/utils/index.js'
import diaBox from "@/components/diaBox/index.vue"

import {
  complainAddApi,
  getComplaintsUserListApi
} from '../../api/api'


export default {
  components: {
    diaBox
  },
  data() {
    return {
      videoUrl: this.$videoUrl,
      // 胶囊的宽度
      barWidth: 0,
      barHeight: 0,
      menuHeight: 0,
      selectTime: '2024-1', // 月份
      // 投诉内容
      textCont: '',
      // 选择类型
      curType: '',
      // 选择员工
      curUser: '',
      options1: [{
        value: 1,
        label: "一楼大厅"
      },
        {
          value: 2,
          label: "一楼包间"
        },
        {
          value: 3,
          label: "二楼大厅",
        }, {
          value: 4,
          label: "二楼卫生间",
        }],
      options: [{
        value: -1,
        label: "卫生类",
      }, {
        value: 5,
        label: "服务类",
      }, {
        value: 10,
        label: "舞台类",
      }, {
        value: 9,
        label: "其他",
      }
      ],
      userList: [],
      // 投诉内容
      remark: '',
      searchValue: '',
      debouncedHandleComplaints: '',
      // 投诉图片
      fileList1: [],
      token: '',
    }
  },
  onLoad() {
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.barHeight = obj.barHeight
    this.menuHeight = obj.menuHeight

    this.handleComplaints()
    this.token = uni.getStorageSync("token");
    // 防抖300毫秒执行
    this.debouncedHandleComplaints = debounce(this.handleComplaints, 300);
  },
  methods: {
    getOptions(){
      let obj = this.options.find(item => item.value == this.curType)
      if(!obj) obj = this.options1.find(item => item.value == this.curType)
      return obj
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {

      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.$baseUrl + "/common/upload",
          filePath: url,
          name: 'file',
          header: {
            Authorization: "Bearer " + this.token
          },
          success: (res) => {
            setTimeout(() => {
              const data = JSON.parse(res.data)
              resolve(data.url)
            }, 300)
          }
        })
      })
    },
    // 删除图片
    deletePic() {

    },
    // 搜索员工
    searchUser() {
      this.debouncedHandleComplaints()
    },
    // 显示员工列表
    handleShowUser() {
      this.$refs.diaBoxRef2.show = true
    },
    // 选择人
    choiceUser(item) {
      this.curUser = item.value
      this.handleCancel()
    },
    // 确认选择人员
    async handleSuc2() {
      if (!this.curType) return uni.$u.toast('请选择投诉类型')
      if (!this.curUser) return uni.$u.toast('请选择投诉员工')

      if (!this.remark) return uni.$u.toast('请输入投诉内容')

      const data = {
        complainType: this.curType,
        complainCode: this.curUser,
        remark: this.remark,
        imgList: this.fileList1.map(item => item.url),
      }

      const res = await complainAddApi(data)
      if (res.code == 200) {
        uni.$u.toast('投诉成功')
        this.remark = ''
        this.fileList1 = []
        this.curType = ''
        this.curUser = ''
      }
    },
    // 获取可投诉列表
    async handleComplaints() {
      const data = {
        userNum: this.searchValue
      }
      const res = await getComplaintsUserListApi(data)
      if (res.code == 200) {
        this.userList = res.data.filter(item => item.userNum).map(item => {
          return {
            value: item.userId,
            label: item.userNum
          }
        })
      }
    },
    // 确认投诉
    handleSuc() {
      this.handleCancel()
    },
    choiceType(item) {
      if(item.value == -1){
        this.$refs.diaBoxRef.show = false
        this.$refs.diaBoxRef3.show = true
        return
      }
      console.log(item.value,":item.value")
      this.curType = item.value
      this.handleCancel()
    },
    // 选择类型
    handleShowDia() {
      this.$refs.diaBoxRef.show = true
    },
    handleCancel() {
      this.$refs.diaBoxRef.show = false
      this.$refs.diaBoxRef2.show = false
      this.$refs.diaBoxRef3.show = false
    },
  }
}
</script>

<style lang="scss" scoped>
.btns {
  margin-top: 46rpx;

  .btnOut {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }


  .btn {
    font-size: 32rpx;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    background: #0FC6C2;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconImg {
      width: 32rpx;
      margin-left: 8rpx;
    }

    .myText {
      text {
        font-weight: 600;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .btnOut3 {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(71, 136, 247, 0.25);
  }

  .btn3 {
    background: #4788f7;
  }

  .btn4 {
    background: #f97609;
  }

  .btnOut4 {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(249, 118, 9, 0.25);
  }

}

.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.textArea {
  color: #fff;
  width: 100%;

  :deep(.u-textarea) {
    color: #fff;
    background-color: transparent !important;
  }
}

.diaTit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 28rpx;
  margin-bottom: 20rpx;

  .search {
    width: 60%;
  }

  .right {
    color: #C131AC;
  }
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.items2 {
  .item2 {
    background-color: #222335;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0 20rpx;
  }

  .active {
    background: #353956;
  }
}

.item {
  min-height: 140rpx;
  border-bottom: 2rpx solid #232826;
  display: flex;
  align-items: center;
  padding: 0 32rpx;

  .upload-box {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    padding-right: 10rpx;
  }

  ::v-deep .u-upload {
    display: flex;
  }

  ::v-deep .u-upload__wrap {
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep .u-upload__button {
    width: 120rpx !important;
    height: 120rpx !important;
    border-radius: 21rpx !important;
    background-color: #3d4548;
    margin: 0;
  }

  .label {
    width: 150rpx;

    text {
      font-weight: 500;
      font-size: 28rpx;
      color: #86909C;
      line-height: 28rpx;
    }
  }

  .value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    text {
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
      text-align: right;
      font-style: normal;
      margin-right: 24rpx;
    }
  }

  .Myvalue {
    text {
      color: #fff;
    }
  }
}

::v-deep .u-textarea {
  width: 100%;
  margin-top: 20rpx;
  color: #fff !important;
  background-color: transparent !important;

  textarea {
    color: #fff !important;
    background-color: transparent !important;
  }
}

.selectTime {
  width: 200rpx;
}

.content {
  position: relative;
  box-sizing: border-box;
  padding: 62rpx 32rpx 0;
  position: relative;
  z-index: 99;

  .items {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 60rpx;
    border: 2rpx solid #232826;
    backdrop-filter: blur(7px);
  }
}

.left-slot {
  color: #fff;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.outBox {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.6);
}
</style>
